<template>
  <div style="position:absolute;left:0;top:0;right:0;bottom:0;">
    <Header />
    <div style="display:flex;position:absolute;left:0;top:93px;right:0;bottom:0;">
      <div style="width:88px;height: 100%;position: relative">
        <slider-bar />
      </div>
      <div style="flex: 1;height: 100%; position: relative">
        <two-map @oneMapInstanceComplete="oneMapInstanceComplete" />
        <!--<dataInput></dataInput>-->
        <base-map />
        <fc />
        <attribute />
        <layer-selector
           ref="ls"
          :is-visible="isVisible"
          @onRsLayerSelected="onRsLayerSelected"
          :imgLayers="imageLayers"
          @onReload="requestUninSpace"
          @onClear="onClear"
        />
        <MapToolbar @onDoubleScreenSwitch="onDoubleScreenSwitch" />
        <Properties ref="properties" />
      </div>
    </div>
  </div>
</template>

<script>
import SliderBar from "@/pages/xcgl/components/sliderbar";
import TwoMap from "@/components/map/TwoMap";
import DataInput from "@/pages/xcgl/components/dataInput"; // 数据输入
import "@/assets/mapbox/libs/draw/mapbox-gl-draw.css";
import MapBoxDraw from "@/assets/mapbox/libs/draw/mapbox-gl-draw.js";
import LayerSelector from "@/pages/xcgl/components/layerselector";
import SortFactory from "@/assets/js/mapboxgl/sortfactory";
import HgcMapBoxUtil from "@/assets/js/mapboxgl";
import MapService from "@/pages/xcgl/components/mapservice";
import MeasureSync from "@/components/map/measureSync";
import BaseMap from "@/pages/xcgl/components/basemap";
import MapToolbar from "@/pages/xcgl/components/mapToolbar"; // 地图工具
import { mapState, mapGetters } from "vuex";
import Header from "@/pages/xcgl/components/header/Header";
import Attribute from "@/pages/xcgl/components/attribute"; // 属性表
import fc from "@/pages/xcgl/components/inspectAttribute";
import Properties from "@/pages/xcgl/components/propertes";
import { listUs, list } from "@/api/xcgl/ysbj";
export default {
  name: "Index",
  components: {
    TwoMap,
    DataInput,
    LayerSelector,
    SliderBar,
    BaseMap,
    MapToolbar,
    Header,
    Attribute,
    fc,
    Properties
  },
  data: function() {
    return {
      mapService: undefined,
      imageLayers: []
    };
  },
  methods: {
    // 地图初始化
    oneMapInstanceComplete(left, right, compare) {
      const sfLeft = new SortFactory(left);
      sfLeft.addSortLayer("qxj", -1, "行政区界线");
      sfLeft.addSortLayer("measure-source", 0, "测量控件");
      sfLeft.addSortLayer("bufferQuery-source", 0, "缓冲区查询面");
      sfLeft.registerAllLayers(this.allBaseMapLayers); // 注册底图数据
      sfLeft.registerAllLayers(this.allLayers); // 注册专题数据
      const mapLeft = new HgcMapBoxUtil(left, sfLeft); // 地图控制
      this.mapServiceLeft = new MapService(mapLeft, sfLeft); // 实例化地图基础操作类
      this.$store.commit("xcgl/setMapServiceLeft", this.mapServiceLeft);

      const sfRight = new SortFactory(right);
      sfRight.addSortLayer("qxj", -1, "行政区界线");
      sfRight.addSortLayer("measure-source", 0, "测量控件");
      sfRight.addSortLayer("bufferQuery-source", 0, "缓冲区查询面");
      sfRight.registerAllLayers(this.allBaseMapLayers); // 注册底图数据
      sfRight.registerAllLayers(this.allLayers); // 注册专题数据
      const mapRight = new HgcMapBoxUtil(right, sfRight); // 地图控制
      this.mapServiceRight = new MapService(mapRight, sfRight); // 实例化地图基础操作类
      this.$store.commit("xcgl/setMapServiceRight", this.mapServiceRight);

      const measure = new MeasureSync(
        this.mapServiceLeft,
        this.mapServiceRight
      );
      this.$store.commit("xcgl/setMeasureSync", measure);
      this.$store.commit("xcgl/setComparable", compare);

      // 绑定事件
      this.mapServiceRight.on("map.init", this.mapInitComplete);
      this.mapServiceRight.on("map.click", this.mapClickEvent); // 图层click
      this.mapServiceRight.on("map.create", this.drawCreateEvent); // 要素添加
      this.mapServiceRight.on("map.delete", this.drawDeleteEvent); // 要素删除
      this.mapServiceRight.on("map.update", this.drawUpdateEvent); // 要素更新
      this.mapServiceRight.on("map.draw.click", this.featureClickEvent); // 地图click
    },

    /**
     * 地图style.load加载完成
     */
    mapInitComplete(map) {
      this.bus.$emit("map.init", this.mapService);
    },
    /**
     * 添加要素，向服务中添加
     * @param e
     */
    drawCreateEvent(e, dr) {
      // 添加
      this.$store.commit("xcgl/setFeatureCollection", dr.getAll().features);
    },
    /**
     * 删除要素
     * @param e
     */
    drawDeleteEvent(e, dr) {
      this.$store.commit("xcgl/setFeatureCollection", dr.getAll().features);
    },
    /**
     * 更新要素
     * @param e
     */
    drawUpdateEvent(e, dr) {
      this.$store.commit("xcgl/setFeatureCollection", dr.getAll().features);
    },
    /**
     * 选中要素
     * @param e
     */
    featureClickEvent(features) {
      if (features) {
        this.$refs["properties"].setData(features);
        this.$refs["properties"].visible = true;
      }
    },

    /**
     * 双屏对比切换
     * @param visible
     */
    onDoubleScreenSwitch(mode) {
      this.$store.commit("xcgl/setLayerSelectorVisible", mode < 2);
      if (mode < 2) {
        // 非单屏
        this.requestUninSpace();
      } else {
        this.onClear(this.$refs['ls'].leftLastSelectLayer,this.$refs['ls'].rightLastSelectLayer);
      }
    },

    requestUninSpace() {
      const bounds = this.mapServiceRight.getMap().getBounds();
      const sw = bounds.getSouthWest().toArray();
      const ne = bounds.getNorthEast().toArray();
      const se = bounds.getSouthEast().toArray();
      const nw = bounds.getNorthWest().toArray();
      listUs({ rect: [sw, se, ne, nw, sw] }).then(res => {
        //数接入到sortFactory中
        this.imageLayers = res.data;
      });
    },

    /**
     * 遥感图层选择
     */
    onRsLayerSelected(type, layer, last) {
      switch (type) {
        case "left":
          if (last) this.mapServiceLeft.removeTempLayer(last._id);
          this.mapServiceLeft.addTempLayer(layer);
          break;
        case "right":
          if (last) this.mapServiceRight.removeTempLayer(last._id);
          this.mapServiceRight.addTempLayer(layer);
          break;
      }
    },
    //清除图层
    onClear(left, right) {
      if (left) this.mapServiceLeft.removeTempLayer(left._id);
      if (right) this.mapServiceRight.removeTempLayer(right._id);
      this.$refs['ls'].leftSelectLayer = undefined;
      this.$refs['ls'].rightSelectLayer = undefined;
    },

    /**
     *
     * 选择事件
     * @param map
     * @param e
     * @param id
     */
    mapClickEvent(e) {
      var feature = e.features.length > 0 && e.features[0];
      let attribute;
      try {
        var layers = this.allLayers.filter(i => i._id === feature.source);
        attribute = JSON.parse(layers.length > 0 && layers[0].attribute);
      } catch (e) {
        attribute = {};
      }
      this.mapServiceRight.openPop(feature, attribute, e.lngLat);
    },

    onLocate(f) {
      this.featureClickEvent(f);
    }
  },
  computed: {
    ...mapGetters("user", ["allLayers", "allBaseMapLayers"]),
    ...mapState({
      isVisible(state) {
        return state.xcgl.layerSelectorVisible;
      }
    })
  },

  beforeDestroy() {
    this.$store.commit("xcgl/setEditTableVisible", false); //关闭数据框
    this.onDoubleScreenSwitch(2);
    this.mapServiceRight.off("map.click", this.mapClickEvent);
    this.bus.$off("onLocate", this.onLocate);
  },

 

  mounted() {
    this.onLocate = this.onLocate.bind(this);
    this.$store.dispatch("xcgl/RequestTasksUnderUser");
    this.bus.$on("onLocate", this.onLocate);
   
  }
};
</script>

<style scoped>
</style>
